<template>
  <div>
    <la-dialog
      ref="dialogRef"
      :title="dialogTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @cancel="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <el-form-item label="菜单类型">
          <el-radio-group v-model="formData.type" class="ml-4">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="permission_name">
          <el-input v-model="formData.permission_name" />
        </el-form-item>
        <el-form-item label="菜单图标" v-if="formData.type != 2">
          <la-icon-picker v-model="formData.icon" />
        </el-form-item>
        <el-form-item label="父级菜单" prop="parent_id">
          <el-tree-select
            v-model="formData.parent_id"
            :data="menuOptions"
            check-strictly
            :render-after-expand="true"
            show-checkbox
          />
        </el-form-item>
        <el-form-item label="权限标识" prop="permission_mark">
          <el-input v-model="formData.permission_mark" />
        </el-form-item>

        <el-form-item label="路由" v-if="formData.type == 1">
          <el-input v-model="formData.route" />
        </el-form-item>
        <el-form-item label="视图" v-if="formData.type == 1">
          <el-input v-model="formData.component" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="show">显示</el-radio>
            <el-radio label="hidden">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权重">
          <el-input-number v-model="formData.weigh" min="0" />
        </el-form-item>
      </el-form>
    </la-dialog>
  </div>
</template>
<script>
import api from "@/lnk/admin/api";
import laDialog from "@/lnk/components/la-dialog/index.vue";
export default {
  components: {
    laDialog,
  },
  data() {
    return {
      mode: "add",
      menuOptions: [],
      formData: {
        type: 1,
        icon: "",
        weigh: 0,
        status:'show',
      },
      formRules: {
        permission_name: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        parent_id: [{ required: true, message: "请选择父级", trigger: "blur" }],
        permission_mark: [
          { required: true, message: "请输入权限标识", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dialogTitle() {
      return this.mode == "add" ? "添加" : "编辑";
    },
  },
  methods: {
    async setFormData(row) {
      const res = await api.menu.read({ id: row.id });
      this.formData = res.data;
    },
    async getMenuOptions() {
      const res = await api.menu.optionsTree();
      res.data.unshift({ label: "顶级", value: 0 });
      this.menuOptions = res.data;
    },
    open(type = "add") {
      this.mode = type;
      this.$refs.dialogRef.open();
      this.getMenuOptions();
      return this;
    },
    close() {
      //   this.$refs.dialogRef.close();
      this.$emit("close");
    },
    async handleSubmit() {
      await this.$refs.formRef.validate();
      if (this.mode == "add") {
        const res = await api.menu.create(this.formData);
      } else {
        const res = await api.menu.update(this.formData);
      }

      this.close();
      this.$emit("success");
    },
    handleClose() {
      this.close();
    },
  },
};
</script>
